<!--<template>
  <view>
    <view v-if="formData && detailData">
      <u-card :title="detailData.title" :desc="detailData.subTitle" :thumb="detailData.img">
        <view slot="extra">
          <text>{{ detailData.price }}</text>
        </view>
      </u-card>
      <view>
        <text>姓名: {{ formData.name }}</text>
        <text>电话: {{ formData.phone }}</text>
        <text>数量: {{ formData.number }}</text>
        <text>预约时间: {{ formData.time }}</text>
        <text>留言: {{ formData.remark }}</text>
        <text>总价: ￥{{ totalPrice }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: null,
      detailData: null,
      totalPrice: 0
    };
  },
  onLoad() {
    const formData = uni.getStorageSync('formData');
    const detailData = uni.getStorageSync('detailData');
    
    if (formData && detailData) {
      this.formData = formData;
      this.detailData = detailData;
      this.totalPrice = this.detailData.price * this.formData.number; // 计算总价
    }
  }
};
</script>


<style>
.list2-page {
  padding: 20rpx;
}

.no-appointments {
  text-align: center;
  font-size: 18px;
  color: #999;
}

u-card {
  margin-bottom: 20rpx;
  box-shadow: 0rpx 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.appointment-status {
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}

.appointment-info {
  margin-top: 10rpx;
  font-size: 14px;
  color: #333;
}

.appointment-name, .appointment-phone, .appointment-time, .appointment-price {
  margin-bottom: 5rpx;
}
</style>
-->
<!--

<template>
  <view class="list2-page">
    <!-- 返回按钮 
    <u-navbar :is-back="true" height="44" title="预约详情" title-size="32" title-color="#000000" :background="background"></u-navbar>

    <!-- 如果有多个表单数据和服务详情，则展示 
    <view v-if="formDataList.length > 0 && detailDataList.length > 0">
      <view v-for="(formData, index) in formDataList" :key="index" class="appointment-details">
        <!-- 服务详情
        <view class="service-info">
          <image :src="detailDataList[index].img" mode="aspectFill" class="service-image" />
          <view class="service-title">
            <text class="service-name">{{ detailDataList[index].title }}</text>
            <text class="service-subtitle">{{ detailDataList[index].subTitle }}</text>
          </view>
          <view class="service-price">
            <text>价格: ￥{{ detailDataList[index].price }}</text>
          </view>
        </view>

        <!-- 预约信息 
        <view class="appointment-info">
          <view class="appointment-item">
            <text class="label">姓名: </text>
            <text>{{ formData.name }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">电话: </text>
            <text>{{ formData.phone }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">预约时间: </text>
            <text>{{ formData.time }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">数量: </text>
            <text>{{ formData.number }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">留言: </text>
            <text>{{ formData.remark }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">总价: </text>
            <text>￥{{ totalPrice }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 如果没有数据，则显示无预约信息 
    <view v-else class="no-appointments">
      <text>没有预约信息</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formDataList: [],    // 所有表单数据
      detailDataList: [],  // 所有服务详情数据
      totalPrice: 0,       // 总价
      background: {
        backgroundImage: 'linear-gradient(135deg, #3cccf7 10%, #4ba6cc 100%)',
      }
    };
  },
  onLoad() {
    // 从本地存储获取所有表单数据和服务详情数据
    const formDataList = uni.getStorageSync('formDataList') || [];
    const detailDataList = uni.getStorageSync('detailDataList') || [];

    this.formDataList = formDataList;
    this.detailDataList = detailDataList;

    // 计算所有预约的总价
    this.totalPrice = this.detailDataList.reduce((sum, detail, index) => {
      return sum + parseFloat(detail.price) * parseInt(this.formDataList[index].number);
    }, 0);
  }
};
</script>

<style scoped>
.list2-page {
  padding: 20rpx;
}

.no-appointments {
  text-align: center;
  font-size: 18px;
  color: #999;
}

.service-info {
  margin-bottom: 20rpx;
}

.service-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.service-title {
  padding: 10rpx 0;
  text-align: center;
}

.service-name {
  font-size: 18px;
  font-weight: bold;
}

.service-subtitle {
  font-size: 14px;
  color: #666;
}

.service-price {
  text-align: center;
  font-size: 16px;
  color: #1989FA;
  margin-top: 10rpx;
}

.appointment-info {
  padding: 10rpx;
  background-color: #f9f9f9;
}

.appointment-item {
  margin-bottom: 10rpx;
}

.appointment-item .label {
  font-weight: bold;
  color: #333;
}

.appointment-item text {
  font-size: 14px;
  color: #666;
}

.appointment-item text:last-child {
  color: #333;
}
</style>-->


<template>
  <view class="list2-page">
    <!-- 返回按钮 -->
    <u-navbar :is-back="true" height="44" title="预约详情" title-size="32" title-color="#000000" :background="background"></u-navbar>

    <!-- 如果有多个表单数据和服务详情，则展示 -->
    <view v-if="formDataList.length > 0 && detailDataList.length > 0">
      <view v-for="(formData, index) in formDataList" :key="index" class="appointment-details">
        <!-- 订单序号 -->
        <view class="order-number">
          <text>订单 {{ index + 1 }}</text>
        </view>

        <!-- 服务详情 -->
        <view class="service-info">
          <image :src="detailDataList[index].img" mode="aspectFill" class="service-image" />
          <view class="service-title">
            <text class="service-name">{{ detailDataList[index].title }}</text>
            
          </view>
          <view class="service-price">
            <text>价格: ￥{{ detailDataList[index].price }}</text>
          </view>
        </view>

        <!-- 预约信息 -->
        <view class="appointment-info">
          <view class="appointment-item">
            <text class="label">姓名: </text>
            <text>{{ formData.name }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">电话: </text>
            <text>{{ formData.phone }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">预约时间: </text>
            <text>{{ formData.time }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">提交订单时间: </text>
            <text>{{ formatTimestamp(formData.submitTime) }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">数量: </text>
            <text>{{ formData.number }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">留言: </text>
            <text>{{ formData.remark }}</text>
          </view>
          <!-- 显示单个项目的价格 -->
          <view class="appointment-item">
            <text class="label">单价: </text>
            <text>￥{{ detailDataList[index].price }}</text>
          </view>
          <view class="appointment-item">
            <text class="label">总价: </text>
            <text>￥{{ calculateTotalPrice(index) }}</text>
          </view>
        </view>

        <!-- 删除按钮 -->
        <view class="delete-btn" @click="deleteOrder(index)">
          <text class="delete-text">取消订单</text>
        </view>
      </view>
    </view>

    <!-- 如果没有数据，则显示无预约信息 -->
    <view v-else class="no-appointments">
      <text>没有预约信息</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formDataList: [],    // 所有表单数据
      detailDataList: [],  // 所有服务详情数据
      background: {
        backgroundImage: 'linear-gradient(135deg, #3cccf7 10%, #4ba6cc 100%)',
      }
    };
  },
  onLoad() {
    // 从本地存储获取所有表单数据和服务详情数据
    const formDataList = uni.getStorageSync('formDataList') || [];
    const detailDataList = uni.getStorageSync('detailDataList') || [];

    this.formDataList = formDataList;
    this.detailDataList = detailDataList;
  },
  methods: {
	   // 格式化时间戳为日期时间格式
	    formatTimestamp(timestamp) {
	      const date = new Date(timestamp); // 将时间戳转换为日期对象
	      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
	    },
		
    // 计算单个订单的总价
    calculateTotalPrice(index) {
      const price = parseFloat(this.detailDataList[index].price);
      const number = parseInt(this.formDataList[index].number);
      return price * number;
    },

    // 删除订单
    deleteOrder(index) {
      // 删除对应索引的订单数据
      this.formDataList.splice(index, 1);
      this.detailDataList.splice(index, 1);

      // 保存删除后的数据到本地存储
      uni.setStorageSync('formDataList', this.formDataList);
      uni.setStorageSync('detailDataList', this.detailDataList);

      // 更新视图
      this.$forceUpdate();
    }
  }
};
</script>

<style scoped>
.list2-page {
  padding: 20rpx;
}

.no-appointments {
  text-align: center;
  font-size: 18px;
  color: #999;
}

/* 每个订单卡片的样式 */
.appointment-details {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx; /* 每个订单卡片之间的间距 */
  border-radius: 10rpx; /* 卡片圆角 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 卡片阴影 */
  border: 1rpx solid #e0e0e0; /* 边框颜色 */
}

.order-number {
  margin-bottom: 10rpx;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.service-info {
  margin-bottom: 20rpx;
}

.service-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
  border-radius: 10rpx; /* 图片圆角，与卡片一致 */
}

.service-title {
  padding: 10rpx 0;
  text-align: center;
}

.service-name {
  font-size: 18px;
  font-weight: bold;
}

.service-subtitle {
  font-size: 14px;
  color: #666;
}

.service-price {
  text-align: center;
  font-size: 16px;
  color: #1989FA;
  margin-top: 10rpx;
}

.appointment-info {
  padding: 10rpx;
  background-color: #f9f9f9;
  border-radius: 5rpx;
}

.appointment-item {
  margin-bottom: 10rpx;
}

.appointment-item .label {
  font-weight: bold;
  color: #333;
}

.appointment-item text {
  font-size: 14px;
  color: #666;
}

.appointment-item text:last-child {
  color: #333;
}

.delete-btn {
  margin-top: 20rpx;
  padding: 10rpx;
  background-color: #f44336;
  color: white;
  text-align: center;
  border-radius: 5rpx;
}

.delete-text {
  font-size: 16px;
}
</style>


<!--
<style scoped>
.list2-page {
  padding: 20rpx;
}

.no-appointments {
  text-align: center;
  font-size: 18px;
  color: #999;
}

.service-info {
  margin-bottom: 20rpx;
}

.service-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.service-title {
  padding: 10rpx 0;
  text-align: center;
}

.service-name {
  font-size: 18px;
  font-weight: bold;
}

.service-subtitle {
  font-size: 14px;
  color: #666;
}

.service-price {
  text-align: center;
  font-size: 16px;
  color: #1989FA;
  margin-top: 10rpx;
}

.appointment-info {
  padding: 10rpx;
  background-color: #f9f9f9;
}

.appointment-item {
  margin-bottom: 10rpx;
}

.appointment-item .label {
  font-weight: bold;
  color: #333;
}

.appointment-item text {
  font-size: 14px;
  color: #666;
}

.appointment-item text:last-child {
  color: #333;
}

.delete-btn {
  margin-top: 20rpx;
  padding: 10rpx;
  background-color: #f44336;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.delete-text {
  font-size: 16px;
}

.order-number {
  margin-bottom: 10rpx;
  font-size: 18px;
  font-weight: bold;
}
</style>-->

